<template>
  <div>
    <el-menu>
      <recursive-menu-item
        v-for="(item, index) in menuData"
        :key="item.menuId"
        :item="item"
        :index="index"
      />
    </el-menu>
  </div>
</template>

<script>
import axios from "axios";
import RecursiveMenuItem from "./RecursiveMenuItem.vue";

export default {
  components: {
    RecursiveMenuItem,
  },
  data() {
    return {
      menuData: [], // initialize menuData as an empty array
    };
  },
  created() {
    axios
      .get("http://localhost:8080/system/menu")
      .then((response) => {
        this.menuData = response.data;
      })
      .catch((error) => {
        console.error(error);
      });
  },
};
</script>
  